import {
    CloseCircleOutlined,
    ExclamationCircleOutlined,
  } from '@ant-design/icons';
  import {
    Button,
    Col,
    DatePicker,
    Drawer,
    Form,
    Input,
    message,
    Modal,
    Row,
    Select, Radio,
  } from 'antd';
  import moment from 'moment';
  import { useEffect, useState } from 'react';
  import styles from './index.less';
  import Remark from './Remark';
  const { RangePicker } = DatePicker;
  const { TextArea } = Input;
  const { Option } = Select;
    
  const dataMat = 'YYYY/MM/DD';
  const WorkBook = (props) => {
    const [form] = Form.useForm();
    const [value, setValue] = useState('1')
    const [text, setText] = useState('当日')
    const { visible, onCloseVisible, info = {
      list: [
        '低代码平台菜单管理模块开发完成','综合管理平台系统管理UI完成'
      ]
    } } = props;
  
    useEffect(() => {
      
    }, []);
    useEffect(()=>{ renderTxt() }, [value])
  
    const onClose = () => {
      onCloseVisible(false);
    };

    const save = () => {
      form
        .validateFields()
        .then((values) => {
            // endTime: values[`endTime${k}`].format(dataMat),
           console.log(values, '--values--s')
        })
        .catch((errinfo) => {
          console.log(errinfo, '--errinof');
        });
    };
    const send = () => {

    }
    const onChange = (e) => {
      setValue(e.target.value)
    }
    const renderTxt = () => {
      let txt = '当日'
      switch(value) {
        case '1': txt = '当日'; break;
        case '2': txt = '本周'; break;
        case '3': txt = '本月'; break;
        case '4': txt = '本季度'; break;
        case '5': txt = '本年度'; break;
        default: txt = '当日'; break;
      }
      setText(txt)
    }
   
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
    };
      const labelCol = {
        labelCol: { span: 2 },
        wrapperCol: { span: 21 },
      }
    return (
      <>
        <Drawer
          title="简报"
          width={600}
          onClose={onClose}
          visible={visible}
          maskClosable={false}
          bodyStyle={{ paddingBottom: 80 }}
          placement={'right'}
        >
          <div>
          <Radio.Group onChange={onChange} style={{marginBottom: '10px'}} value={value}>
            <Radio value={'1'}>日报</Radio>
            <Radio value={'2'}>周报</Radio>
            <Radio value={'3'}>月报</Radio>
            <Radio value={'4'}>季报</Radio>
            <Radio value={'5'}>年报</Radio>

          </Radio.Group>
            <div className={styles.work_wrap}>1.{text}你完成了什么工作？</div>
            <ul>
              {info.list && info.list.length > 0 && info.list.map((item, index)=>(
                <li>{index+1}.{item}</li>
              ))}
            </ul>
            <TextArea></TextArea>
            <div className={styles.work_wrap}>2.下个周期计划完成什么工作？</div>
            <TextArea value={info.work}></TextArea>
            <div className={styles.work_wrap}>3.({text}复盘)工作遇到了哪些困难</div>
            <TextArea value={info.question}></TextArea>
            <div className={styles.work_wrap}>4.({text}复盘)工作中，有什么想要分享的？</div>
            <TextArea value={info.share}></TextArea>
            <div className={styles.work_wrap}>5.备注</div>
            <TextArea value={info.remark}></TextArea>

          </div>
          <Row
            style={{
              position: 'absolute',
              width: '690px',
              padding: '20px 0',
              bottom: '0px',
              background: '#ffffff',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            <Button type="primary" onClick={save} style={{ marginRight: '10px' }}>
              保存
            </Button>
            <Button type="primary" onClick={send} style={{ marginRight: '10px' }}>
              发送
            </Button>
            <Button onClick={onClose} style={{ marginRight: '10px' }}>
              取消
            </Button>
          </Row>
        </Drawer>
      </>
    );
  };
  
  export default WorkBook;
  